<script setup>

  import { computed, reactive, ref, unref } from 'vue';

  import {
    onReachBottom, onLoad, onReady,
  } from '@dcloudio/uni-app';
  import businessScrollList from '@/sheep/businessCom/business-scroll-list.vue';
  import SLayout from '@/sheep/components/s-layout/s-layout.vue';
  import sheep from '@/sheep';
  import rankingHotItem from '@/sheep/businessCom/pages/ranking-hot-item.vue';

  import SpuApi from '@/sheep/api/product/spu';
  import { deepClone } from '@/uni_modules/uview-plus';
  import { fen2yuan } from '../../sheep/hooks/useGoods';

  const props = defineProps({
    tp: String,
  });
  console.log('tp=' + props.tp); // id=10

  const src = ref('https://cdn.uviewui.com/uview/album/1.jpg');

  // 隐藏原生tabBar
  uni.hideTabBar();

  const template = computed(() => sheep.$store('app').template?.home);
  const setting = computed(() => sheep.$store('category').album);

  const state = reactive({
    showModal: false,
    bottomListActive: 0,
    searchParam: {},
    tp: props.tp,
    album: setting.value.default,
    hotList: setting.value.hotList,
    albumList: [],
  });
  onReady(async () => {
    const { code, data } = await SpuApi.getHotList({
      names: state.hotList.map(item => item.name).join(','),
    });
    if (code === 0) {
      state.albumList = data.map(item=>{
        const hot = state.hotList.find(hot=>hot.name === item.name);
        Object.assign(item,hot)
        return item
      });
    }
  });

  const pageStyle = {
    'description': '',
    'backgroundColor': state.album.bgColor,
    'backgroundImage': '',
  };
  const albumGrid = [
    {
      name: 'photo',
      title: '自营电商',
    },
    {
      name: 'lock',
      title: '大牌同厂',
    },
    {
      name: 'star',
      title: '品质保障',
    },
    {
      name: 'hourglass',
      title: '7天退换',
    },
  ];

  // #ifdef H5
  const navbar = 'none';
  // #endif
  // #ifdef MP
  const navbar = 'custom';
  // #endif
  onReachBottom(() => {
    console.log('到底了');
    uni.$emit('onReachBottom');
  });
</script>

<template>
  <s-layout title="首页" :navbar="navbar" tabbar="/pages/index/ranking" :bgStyle="pageStyle"
            :navbarStyle="template.navigationBar" onShareAppMessage>
    <view class="header uno-relative">
      <up-image :show-loading="true" :src="state.album.topPic" width="100%" height="280px" @click="click"></up-image>
    </view>
    <view>
      <up-grid
        :border="false"
        col="4"
      >
        <up-grid-item
          v-for="(listItem,listIndex) in albumGrid"
          :key="listIndex"
        >
          <up-icon
            :customStyle="{paddingTop:20+'rpx'}"
            :name="listItem.name"
            :size="22"
          ></up-icon>
          <text class="grid-text">{{ listItem.title }}</text>
        </up-grid-item>
      </up-grid>
    </view>

    <view class="uno-p-2 uno-flex uno-flex-col ">
      <view v-for="item in state.albumList">
        <view  class="uno-border-rd-lg uno-overflow-hidden uno-mt4">
          <up-image :src="item.imgUrl"  width="100%"
                    height="200rpx"></up-image>
        </view>
        <view class="uno-mt4">
          <up-grid
            :border="false"
            col="3"
            gap="20rpx"
          >
            <up-grid-item
              v-for="(listItem,listIndex) in item.productSpuDOList.filter((_,index)=> index<3)"
              :key="listIndex"
              @click="sheep.$router.go('/pages/goods/index',{id:listItem.id})"
            >
              <view class="uno-w-[100%] uno-flex uno-flex-col uno-bg-white uno-p2 uno-box-border">
                <up-image :src="listItem.picUrl"  width="100%"
                          height="200rpx"></up-image>
                <view>
                  <up-text :text="listItem.name" :lines="1"></up-text>
                </view>
                <view class="uno-flex ">
<!--                  <view class="uno-color-red uno-flex">￥<text>{{fen2yuan(listItem.price)}}</text> </view>-->
                  <text style="text-decoration: line-through">￥{{ fen2yuan( listItem.marketPrice)}}</text>
                </view>

              </view>
            </up-grid-item>
          </up-grid>
        </view>

        <view class="uno-flex uno-justify-center uno-items-center">
          <view class="uno-w-[80%] uno-color-#854f1e uno-border-style-solid uno-border-color-#5b3321  uno-border-width-2 uno-text-center uno-p2 uno-mt3"
          style="border-radius: 40rpx"
                @click="sheep.$router.go('/pages/index/albumDetail',{tp:item.name})"
          >
            <text>查看更多</text>
            <text>》</text>
          </view>
        </view>
      </view>
    </view>
  </s-layout>
</template>

<style scoped lang="scss">
  :deep(.page-body) {
    background: #efddcf !important;
  }

  .header {
    position: relative;
  }
</style>